<template>

  <div style="width: 100%;height: 100%">
    <el-row style="margin: 15px;">
      <el-button @click="addAreaPage()"  type="primary" size="small">新增</el-button>
    </el-row>

    <el-row style="margin-left: 15px;margin-right: 15px;">
        <el-table :data="formatData" :row-style="showRow" v-bind="$attrs">
        <el-table-column v-if="columns.length===0" width="150">
          <template slot-scope="scope">
            <span v-for="space in scope.row._level" :key="space" class="ms-tree-space"/>
            <span v-if="iconShow(0,scope.row)" class="tree-ctrl" @click="toggleExpanded(scope.$index)">
          <i v-if="!scope.row._expanded" class="el-icon-plus"/>
          <i v-else class="el-icon-minus"/>
        </span>
            {{ scope.$index }}
          </template>
        </el-table-column>

        <el-table-column v-for="(column, index) in columns" v-else :key="column.value" :label="column.text" :width="column.width">
          <template slot-scope="scope">
            <span v-for="space in scope.row._level" v-if="index === 0" :key="space" class="ms-tree-space"/>
            <span v-if="iconShow(index,scope.row)" class="tree-ctrl" @click="toggleExpanded(scope.$index)">
          <i v-if="!scope.row._expanded" class="el-icon-plus"/>
          <i v-else class="el-icon-minus"/>
        </span>
            {{ scope.row[column.value] }}
          </template>
        </el-table-column>


        <el-table-column
          fixed="right"
          label="操作"
          align="center"
          width="280">
          <template slot-scope="scope">
            <el-button @click="checkWork(scope.row)" type="success"  size="mini" >查看工位</el-button>
            <el-button @click="handleEdit(scope.row)" type="primary"  size="mini" >编辑</el-button>
            <el-button @click="handleDel(scope.row)" type="danger"  size="mini" >删除</el-button>

          </template>
        </el-table-column>

        <slot/>
      </el-table>
    </el-row>

    <!--  查看工位信息-->
    <el-dialog
      :title="dialog.title"
      :visible.sync="dialog.show"
      :close-on-click-modal='false'
      :close-on-press-escape='false'
      :modal-append-to-body="false"
      center width="58%">

      <el-table
        :data="filterData"
        border
        fit
        highlight-current-row
        style="width: 100%;"
      >
        <el-table-column label="工位编码" prop="code"  align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.code }}</span>
          </template>
        </el-table-column>

        <el-table-column label="工位类型" prop="type" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.type}}</span>
          </template>
        </el-table-column>

        <el-table-column label="工位名称" prop="name" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.name}}</span>
          </template>
        </el-table-column>

        <el-table-column label="工位位置" prop="location" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.location}}</span>
          </template>
        </el-table-column>

      </el-table>

      <!-- 分页 -->
      <el-row>
        <el-col :span="24">
          <div class="pagination">
            <el-pagination
              v-if='paginations.total > 0'
              :page-size="paginations.page_size"
              :layout="paginations.layout"
              :total="paginations.total"
              :current-page.sync='paginations.page_index'
              @current-change='handleCurrentChange'>
            </el-pagination>
          </div>
        </el-col>
      </el-row>

      <span slot="footer" class="dialog-footer">
          <el-button @click="dialog.show = false">关 闭</el-button>
     </span>

    </el-dialog>

    <!-- 编辑区域位置-->
    <el-dialog
      :title="dialogArea.title"
      :visible.sync="dialogArea.show"
      :close-on-click-modal='false'
      :close-on-press-escape='false'
      :modal-append-to-body="false"
      center width="58%">

      <el-form
      ref="form"
      :model="form"
      :rules="form_rules"
      label-width="100px"
      style="margin:10px;width:auto;"
    >

      <!--<el-form-item prop='code' label="区域编码">
        <el-input type="code" v-model="form.code" ></el-input>
      </el-form-item>
      <el-form-item prop='type' label="区域类型">
        <el-input type="type" v-model="form.type" ></el-input>
      </el-form-item>
      <el-form-item prop='name' label="区域名称">
        <el-input type="name" v-model="form.name" ></el-input>
      </el-form-item>
      <el-form-item prop='location' label="区域位置">
        <el-input type="location" v-model="form.location" ></el-input>
      </el-form-item>-->

        <el-form-item prop='code' label="区域编码">
          <el-input type="code" v-model="form.code"></el-input>
        </el-form-item>
        <el-form-item prop='type' label="区域类型">
          <el-input type="type" v-model="form.type"></el-input>
        </el-form-item>
        <el-form-item prop='parentId' label="父节点">
          <el-select v-model="form.parentId" placeholder="请选择">
            <el-option
              v-for="item in areaArr"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
          <!--<el-input type="parentId" v-model="form.parentId"></el-input>-->
        </el-form-item>
        <el-form-item prop='name' label="区域名称">
          <el-input type="name" v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item prop='desc' label="区域位置">
          <el-input type="desc" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item prop='desc' label="区域描述">
          <el-input type="textarea" v-model="form.desc"></el-input>
          <!-- <el-input type="desc" v-model="form.desc"></el-input>-->
        </el-form-item>
        <el-form-item prop='level' label="区域层级">
          <el-input-number v-model="form.level" controls-position="right"  :min="0"></el-input-number>
        </el-form-item>

    </el-form>

      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogArea.show = false">返 回</el-button>
          <el-button type="primary" @click='onSubmitArea("form")'>提 交</el-button>
     </span>

    </el-dialog>


  </div>
</template>

<script>
/**
  Auth: Lei.j1ang
  Created: 2018/1/19-13:59
*/
import treeToArray from './eval'
import {saveArea,getWorkList} from '@/api/device'
export default {
  name: 'TreeTable',
  props: {
    /* eslint-disable */
    data: {
      type: [Array, Object],
      required: true
    },
    columns: {
      type: Array,
      default: () => []
    },
    evalFunc: Function,
    evalArgs: Array,
    expandAll: {
      type: Boolean,
      default: false
    },
  },
  data(){
      return{
        dialogArea: {
          show: false,
          title: "区域信息",
          option: "edit"
        },
        dialog: {
          show: false,
          title: "工位信息",
          option: "edit"
        },
        form:{},
        form_rules: {
          code: [
            {required: true, message: "编码不能为空！", trigger: "blur"}
          ],
          type: [
            {required: true, message: "类型不能为空！", trigger: "blur"}
          ],
          parentId: [
            {required: true, message: "父节点不能为空！", trigger: "blur"}
          ],
          name: [
            {required: true, message: "名称不能为空！", trigger: "blur"}
          ],
          location: [
            {required: true, message: "位置不能为空！", trigger: "blur"}
          ],
          desc: [
            {required: true, message: "描述不能为空！", trigger: "blur"}
          ],
          level: [
            {required: true, message: "层级不能为空！", trigger: "blur"}
          ]


        },
        areaArr:[],
        filterData:[],
        paginations: {
          page_index: 1, // 当前位于哪页
          total: 0, // 总数
          page_size: 10, // 1页显示多少条
          layout: "total,prev, pager, next "// 翻页属性
        },
      }
  },
  created() {
      console.log(this.data)
  },
  computed: {
    // 格式化数据源

    formatData: function() {
      let tmp
      if (!Array.isArray(this.data)) {
        tmp = [this.data]
      } else {
        tmp = this.data
      }
      const func = this.evalFunc || treeToArray
      const args = this.evalArgs ? Array.concat([tmp, this.expandAll], this.evalArgs) : [tmp, this.expandAll]
      console.log(args)
      return func.apply(null, args)
    }
  },
  methods: {
    showRow: function(row) {
      const show = (row.row.parent ? (row.row.parent._expanded && row.row.parent._show) : true)
      row.row._show = show
      return show ? 'animation:treeTableShow 1s;-webkit-animation:treeTableShow 1s;' : 'display:none;'
    },
    // 切换下级是否展开
    toggleExpanded: function(trIndex) {
      const record = this.formatData[trIndex]
      record._expanded = !record._expanded
    },
    // 图标显示
    iconShow(index, record) {
      return (index === 0 && record.children && record.children.length > 0)
    },
    //导入数据
    addAreaPage(){
      this.$router.push({name:"addWorkPage"})
    },

    //分页
    handleCurrentChange(page){

    },
    //查看工位
    checkWork(data){
      this.dialog.show = true
      this.filterData =[
        {
        code:"code",
        type:"测试",
        parentId:"1212",
        name:"name1",
        location:"测试位置",
        desc:"1212"
      },
        {
          code:"code",
          type:"测试",
          parentId:"1212",
          name:"name2",
          location:"测试位置",
          desc:"1212"
        }
        ]
      this.paginations.total = this.filterData.length
      return
      return new Promise((resolve, reject) => {
        getWorkList().then(response => {
          if(response.message == "success"){
              this.filterData = []
              resolve()
          }else {
            this.$message({
              message: "获取数据失败！",
              type: "error"
            });
            resolve(response)
          }
        }).catch(error => {
          reject(error)
        })
      })
    },
    //编辑信息
    handleEdit(data){
      this.form = {
        type: data.type,
        code: data.code,
        parentId: data.parentId,
        name: data.name,
        location:data.location,
        desc:data.desc,
        level:data.level
      }
      this.dialogArea.show = true
    },
    //提交编辑
    onSubmitArea(form){
      this.dialogArea.show = false
      this.$refs[form].validate(valid => {
        if (valid) {
          //表单数据验证完成之后，提交数据;
          let url = '/user/save';
          if(this.dialog.option == 'edit'){
            url = '/user/update'
          }
          return new Promise((resolve, reject) => {
            saveArea(url,this.form).then(response => {
              let messageHeard = "添加"
              if(this.dialog.option == 'edit'){
                messageHeard = "编辑"
              }
              if(response.message == "success"){
                this.$message({
                  message: messageHeard+"成功！",
                  type: "success"
                });

                if(this.dialog.option == 'edit'){

                }else {

                }
                this.dialog.show = false;
                resolve()
              }else {
                this.$message({
                  message: messageHeard+"失败！",
                  type: "error"
                });
                this.dialog.show = false;
                resolve(response)
              }
            }).catch(error => {
              reject(error)
            })
          })
        }
      });

    },

    //删除
    handleDel(data){

    },
  }
}
</script>
<style rel="stylesheet/css">
  @keyframes treeTableShow {
    from {opacity: 0;}
    to {opacity: 1;}
  }
  @-webkit-keyframes treeTableShow {
    from {opacity: 0;}
    to {opacity: 1;}
  }
</style>

<style lang="scss" rel="stylesheet/scss" scoped>
  $color-blue: #2196F3;
  $space-width: 18px;
  .ms-tree-space {
    position: relative;
    top: 1px;
    display: inline-block;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    width: $space-width;
    height: 14px;
    &::before {
      content: ""
    }
  }
  .processContainer{
    width: 100%;
    height: 100%;
  }
  table td {
    line-height: 26px;
  }

  .tree-ctrl{
    position: relative;
    cursor: pointer;
    color: $color-blue;
    margin-left: -$space-width;
  }
  .pagination {
    text-align: right;
    margin-top: 10px;
  }
</style>
